<template>
    <div>
        Home
        <p ref="msg">msg:{{msg}}</p>
        <!-- 触发 beforeUpdate和updated-->
        <button @click="changeMsg">改变msg</button> 

        <!-- 除此之外,还有两个生命周期,keep-alive被缓存的组件不会执行created和mounted的生命周期,只会执行activated和deactivated的生命周期钩子函数 -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            msg: "Hello Home"
        }
    },
    methods: {
        changeMsg() {
            this.msg = "hello world"
        }
    },
    beforeCreate() {
        console.log("home beforeCreated");;
    },
    created() {
        console.log("home created");
    },
    beforeMount() {
        console.log("home beforeMounted");;
    },
    mounted() {
        console.log("home Mounted");;
    },
    beforeUnmount() {
        console.log("home beforeUnmount");
    },
    unmounted() {
        // 在这里通常使用取消事件
        console.log("home unmounted");
    },
    beforeUpdate() {
        console.log(this.$refs.msg.innerHTML);
        console.log("home beforeUpdate");
    },
    updated() {
        console.log(this.$refs.msg.innerHTML);
        console.log("home updated");
    }
}
</script>

<style lang="scss" scoped>
</style>